<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>用户注册</title>
    <meta charset="UTF-8">
    <script src="../../jquery/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        li{
            list-style: none;
            color: gray;
            margin-top: 20px;
            height: 30px;
            position: relative;
        }
        input{
            height: 30px;
            width: 300px;
        }
        li img{
            position: absolute;
            left: 10px;
            top:10px;
        }
        li img#tu5{
            top:13px;
        }
        input#word{
            width: 180px;
        }
        img#tuy{
            height: 35px;
            width: 100px;
            border: 1px solid gray;
            left: 200px;
            top: 0px;
        }
        li a.a1{
            position: relative;
            left: 120px;
            color: red;
        }
        a#id{
            color: deepskyblue;
        }
        input#check{
            position: relative;
            top: 2px;
            margin-left: 100px;
            width: 15px;
            height: 15px;
        }
        input[type=submit]{
            position: absolute;
            left: 50px;
            color: white;
            width: 200px;
            height: 40px;
            background-color: deepskyblue;
            border-radius: 10px;
            border: 1px solid white;
        }
        a.a2{
            display: none;
        }
        a#td{
            display: none;
        }
    </style>
    <script>
        $(function () {
            var flag = true;
            $("input#username").keydown(function () {
                $("img#tu1").hide();
                var name =$(this).val();
                if(name.length>=4&&name.length<=12){
                    $("a#usn").hide();
                    var bds = /^(\w|[\u4E00-\u9FA5])*$/;
                    if(bds.test(name)){
                        $("a#usn").hide();
                        flag = true;
                        return flag;
                    }else {
                        $("a#usn").text("英文、数字或者中文才可以").css("color","red").show();
                        flag = false;
                        return flag;
                    }
                }else {
                    $("a#usn").text("长度须在4-12之间").css("color","red").show();
                    flag = false;
                    return flag;
                }
                $("input#password").keydown(function () {
                    $("img#tu2").hide();
                    var pass =$(this).val();
                    if(pass.length>=6&&pass.length<=16){
                        $("a#psd").hide();
                        var bds = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,}$/;
                        if(bds.test(pass)){
                            $("a#psd").hide();
                            flag = true;
                            return flag;
                        }else {
                            $("a#psd").text("必须包含数字、字母，区分大小写才可以").css("color","red").show();
                            flag = false;
                            return flag;
                        }
                    }else {
                        $("a#psd").text("长度须在6-16之间").css("color","red").show();
                        flag = false;
                        return flag;
                    }
                })
               $("input#repassword").keydown(function () {
                   $("img#retu2").hide();
                   var repass =$(this).val();
                   var pass =$("input#password").val();
                   if(repass==pass){
                       $("a#repsd").hide();
                       flag = true;
                       return flag;
                   }else{
                       $("a#repsd").css("color","red").show();
                       flag = false;
                       return flag;
                   }
               })
                $("input#word").keydown(function () {
                    $("img#tu3").hide();
                    var word = $(this).val();
                    if(word ==""){
                        $("a#td").show();
                    }
                })
                $("form").submit(function(){
                    $(":checkbox").each(function(){
                        if(!this.checked){
                            alert("请同意用户服务条款");
                            return false;
                        }
                    });
                    if(!flag){
                        alert("请输入正确信息");
                    }
                    return flag;
                });


            })
        })
    </script>
</head>
<body>
<div>
    <ul>
        <li>
            <input type="text" id="email" placeholder="         请输入您的常用邮箱">
            <img id="tu5" src="image/login-input5.png" class="b1"/></imput>   <a id="ema" class="a2">请输入您的常用邮箱</a>
        </li>
        <li>
            <input type="text" id="username" placeholder="         请输入昵称">
            <img id="tu1" src="image/login-input1.png" class="b1"/></imput>   <a id="usn" class="a2">4-12位字符、英文、数字或者中文均可以</a>
        </li>
        <li>
            <input type="password" id="password" placeholder="         请输密码">
            <img id="tu2" src="image/login-input2.png " class="b1"/></imput>   <a id="psd" class="a2">6-16位字符或数字、字母，区分大小写</a>
        </li>
        <li>
            <input type="password" id="repassword" placeholder="         请再次输密码">
            <img id="retu2" src="image/login-input2.png" class="b1"/></imput>   <a id="repsd" class="a2">前后密码不相同</a>
        </li>
        <li>
            <input type="text" id="word" placeholder="         请输入右侧验证码">
            <img id="tu3" src="image/login-input3.png" class="b1"/></imput>
            <img id="tuy" src="image/yanzhengma.png">   <a class="a1" id="td">验证码不能为空</a>
        </li>
        <li class="l1">
            <input type="checkbox" id="check" checked="checked">同意<a id="id" href="#">用户服务条款</a>
        </li>
        <li>
            <input type="submit" value="注册">
        </li>
    </ul>
</div>
</body>
</html>